<template>
	<view>
		<!-- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> -->
		<view class="strategy_change">
				<view class="cont_item" v-for="(item,index) in sdata" :key="index">
					<view class="item_tit">
						<text>{{item.name}}</text>
						<!-- <text>查看</text> -->
					</view>
					<view class="proceeds-list" @click="toDetailPage(item)">
						 <view class="proceeds">  
							<text class="proceeds-percent" style="color: rgb(235, 51, 59);">{{item.mark.accumulated_earnings}}%</text>
							<text class="proceeds-name">累计收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent" style="color: rgb(45, 175, 74);">{{item.mark.earnings==0?'0.00':(item.mark.earnings*100).toFixed(2)}}%</text>
							<text class="proceeds-name">今日收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent" style="color: rgb(235, 51, 59);">{{item.mark.year_earings}}%</text>
							<text class="proceeds-name">年化收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent">{{item.cacudata.maxCanc}}</text>
							<text class="proceeds-name">最大回撤</text>
						</view>
					</view>
				</view>
				<!-- <view class="cont_item">
					<view class="item_tit">
						<text>收款机</text>
						<text>查看</text>
					</view>
					<view class="proceeds-list">
						 <view class="proceeds">
							<text class="proceeds-percent" style="color: rgb(235, 51, 59);">{{}}%</text>
							<text class="proceeds-name">累计收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent" style="color: rgb(45, 175, 74);">{{}}%</text>
							<text class="proceeds-name">今日收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent" style="color: rgb(235, 51, 59);">{{}}%</text>
							<text class="proceeds-name">年化收益</text>
						</view>
						<view class="proceeds">
							<text class="proceeds-percent">{{}}%</text>
							<text class="proceeds-name">最大回撤</text>
						</view>
					</view>
				</view> -->
		</view>
	</view>
</template>

<script>
	import {getStrategyPage} from '@/api/strategy.js'
	import StrategyListModel from '@/model/StrategyListModel.js'
	import {toStrategyDetailPage} from '@/utils/PageRouter.js'
	export default {
		data() {
			return {
				keyword:'',
				sdata:[],
				maxCanc:''
			};
		},
		onLoad() {
			// var webview = this.$mp.page.$getAppWebview();
			// webview.setStyle({titleNView:{
			//   backButton:{
			//     badgeBackground:'#ffffff'
			//   }
			// }});
			// uni.setNavigationBarColor({
			// 	frontColor:'#000000',//仅支持 #ffffff 和 #000000
			// 	backgroundColor:'#ffffff',
			// })
		},
		onNavigationBarSearchInputChanged(e) {
			// page, , list, name
			let data={
				page:1,
				limit:10,
				name:e.text
			}
			getStrategyPage(data).then(res=>{
				if(res.code==200){
					const {data} = res
					const newData = data.map((item, ind) => {
						const Model = new StrategyListModel()
						const obj = Model.setAttributes(item).toObject()
						// obj.date=item.earningsGraph.date
						// obj.series=item.earningsGraph.accumulated_earnings
						obj.mark=item.earningsReport
						obj.cacudata=item.cacudata
						// obj.left_stock=item.left_stock
						// obj.subscription=item.subscription
						return obj
					})
					this.sdata=newData
				}
			})
			// this.searchWords = e.text;
		},
		onNavigationBarSearchInputConfirmed() {
			uni.hideKeyboard();//隐藏软键盘
			if (this.searchWords.trim().length == 0) {
				//搜索框内容为空
				return;
			}
			//搜索框内容不为空时操作
		},
		methods:{
			toDetailPage(item){
				toStrategyDetailPage(item.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.strategy_change{
		// margin-top: 80px;
		// background-color: rgba(0,0,0,.6);
		.cont_item{
			padding: 10px 20px;
			// border-bottom: 1rpx solid $theme_margin;
			border-bottom: 1rpx solid #DBDBDB;
			.item_tit{
				display: flex;justify-content: space-between;align-items: center;font-size: 14px;
			}
			.proceeds-list{
				display: flex;
				flex-direction: row;
				padding-bottom: $theme_margin;
				margin-top: 5px;
			}
			.proceeds{
				// display: flex;
				flex: 1;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
			.proceeds-percent{
				display: block;
				color: #666;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.proceeds-name{
				display: block;
				color: #999;
				font-size: 28rpx;
			}
		}
		
	}
</style>
